<template>
    <div class="home">
        <div class="navigate">
            <div class="nav" v-for="route of routeList[0].children" :key = "route.name" @click="jumpRouter(route.name)">{{route.name}}</div>
        </div>
        <div class="view">
            <router-view></router-view>
        </div>
        <div class="word-cloud">
            <div class="user">
                <p>hi, xianren</p>
                <i><img src="../assets/profile.jpg" alt="" style="height:40px"></i>
            </div>
            <div class="lines">
                <h4>每日推荐</h4>
                <p class="content">{{ lines_data.lines }}</p>
                <p class="origin">——{{ lines_data.origin }}</p>
            </div>
            <div class="search">
                <div v-if="isSearch" >
                    <input type="text" class="left" placeholder="请输入电影全名" v-model="name">
                    <i><img src="../assets/搜索.png" alt="" @click="searchCloud"></i>
                </div>
                <div v-else >
                    <i><img src="../assets/37search.png" alt="" @click=""></i> 
                    <p class="left">评论太多不想看?来个酷炫的词云图吧</p> 
                </div> 
            </div>
            <div class="cloud">
                <img :src="cloud_src" alt="">
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reqLines,reqCloud } from '../api';
import { reactive, onMounted,ref } from 'vue'
import { RouteRecordName, useRoute ,useRouter} from 'vue-router';
import { linesInt } from '../types/home'
//获得router,用来路由跳转
const router = useRouter()
//获得home组件的子路由
const routeList = reactive(router.getRoutes().filter(item=> item.children.length > 0))
//路由跳转按钮
const jumpRouter = (name:RouteRecordName|undefined)=>{
    router.push({
        name
    })
}
//后台基础地址
const base_url = 'http://127.0.0.1:8000'
//存储返回的推荐台词数据
const lines_data: linesInt = reactive({
    lines: '',
    origin: ''
})
//控制词电影名
const name = ref('')
//控制词云搜索框是否能够出现
const isSearch = ref(true)
//词云图片链接地址
const cloud_src = ref('src/assets/这个杀手不太冷静.jpg')
//接口密钥
const key = "bb2fb73286bab26098573d8927918ee1"
//每日推荐接口获取数据
const reqLine = async () => {
    let result = await reqLines(key)
    if (result.data.code == 200) {
        lines_data.lines = result.data.newslist[0].dialogue
        lines_data.origin = result.data.newslist[0].source
        //将返回的数据存入本地存储
        localStorage.setItem('lines', lines_data.lines)
        localStorage.setItem('origin', lines_data.origin)
    }
}
//获取词云图地址
const reqCloudpath = async ()=> {
    if (! name){
        return 
    }
    let result = await reqCloud({name:name.value})
    if(result.status == 200){
        cloud_src.value = result.data.path ?base_url + result.data.path  : "src/assets/没找到.png"
        
    }
}
//搜索按钮
const searchCloud = ()=>{
    reqCloudpath()
}
//在声明周期钩子中来获取每日推荐
onMounted(() => {
    //获取当前年月日
    let time = new Date()
    let date = `${time.getFullYear()}.${time.getMonth()}.${time.getDate()}`
    //判断是否是另一天了
    if (localStorage.getItem('date') !== date) {
        //将日期存入本地存储
        localStorage.setItem('date', date)
        reqLine()
    } else {
        //将本地存储的数据返回到页面上
        lines_data.lines = localStorage.getItem('lines') as string
        lines_data.origin = localStorage.getItem('origin') as string
    }

})

</script>

<style scoped lang="less">
.home {
    height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: rgb(1,22,39);

    .navigate {
        flex-grow: 1;
        border-right: 1px #ccc solid;
        .nav {
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-bottom: #cfb 1px solid;
            
        }
    }

    .view {
        width: 1000px;
        height: 100%;
    }

    .word-cloud {
        width: 400px;
        /*background: linear-gradient(to bottom, #ccfbff, #ef96c5); */
        .user {
            display: flex;
            flex-direction: row;
            justify-content: right;
            margin-top: 10px;
            height: 40px;
            text-align: right;

            p {
                padding-top: 13px;
            }

            i {
                width: 40px;
                height: 40px;
                margin: 0 20px;
                border-radius: 50%;
                border: 1px #fff solid;
                box-shadow: 0 0 10px #ccc;
                overflow: hidden;
            }
        }

        .lines {
            margin: 60px 20px;
            padding: 20px 15px;
            background: rgba(255, 255, 255, 0.19);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(0px);
            -webkit-backdrop-filter: blur(0px);
            border: 1px solid rgba(255, 255, 255, 0.14);

            h4 {
                text-align: center;
            }

            .content {
                text-align: left;
                margin: 30px 0 20px 0;
                font-size: 20px;
                color:rgb(123, 46, 141);
                font-weight: 500;
                font-family: 楷体;
            }

            .origin {
                text-align: right;
                font-family: 隶书;
            }
        }

        .search {
            padding: 0 15px;
            div {
                height: 50px;
                padding: 0 15px;
                display: flex;
                background-color: #ccfbff;
                line-height: 50px;
                .left {
                    flex-grow: 1;
                }
                input {
                    padding-left: 20px;
                    background:rgba(0,0,0,0);
                    border: none;
                    outline: none;
                    font-size: 16px;
                }
                i {
                    height: 40px;
                    padding-top: 10px;
                    img {
                        height: 60%;
                    }
                }

            }
        }
        .cloud {
            margin-top: 20px;
            padding: 0 15px;
            text-align: center;
            img {
                width: 80%;
            }
        }
    }
}
</style>